﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>超越overflow</title>
<style>
body {
    background-color: #bbb;
}
.scroll {
    width: 500px; height: 300px;
	margin: 200px auto 0;
	/**
	 * [CSS3 长度单位 vh](http://www.w3chtml.com/css3/units/length/vh.html)
	 * 相对于视口的高度。视口被均分为100单位的vh
	 */
	margin-top: -webkit-calc(50vh - 150px);
	margin-top: calc(50vh - 150px);
	border: 1px solid #ccc;
	border-radius: 3px;
	/**
	 * [CSS3 box-shadow 属性](http://www.w3school.com.cn/cssref/pr_box-shadow.asp)
	 * box-shadow: h-shadow v-shadow blur spread color inset;
	 */
	box-shadow: 0 0 3px rgba(0,0,0,.35);
	background-color: #fff;
	overflow: auto;
}
.close {
    position: absolute;
	width: 34px; height: 34px;	
	margin: -17px 0 0 483px;
	background: url(http://img.mukewang.com/5444835b000100ce00340075.png) no-repeat;
}
.close:hover {
	/**
	 * [CSS background-position 属性](http://www.zgguan.com/doc/w3c/css/pr_background-position.asp.htm)
	 * background-position 属性设置背景图像的起始位置。
	 * `.close`所用的背景图片包含两幅“关闭”按钮的图片。
	 */
    background-position: 0 -41px;	
}
img {
	display: block;
	margin: 10px;
}
</style>
</head>

<body>
<div class="scroll">
	<a href="javascript:" class="close" title="关闭"></a>
	<img src="http://img.mukewang.com/54447b06000171a002560191.jpg">
    <img src="http://img.mukewang.com/54447f550001ccb002560191.jpg">
</div>
</body>
</html>